<template>
  <!--设置分栏特点-->33
  <nf-form
    v-form-drag="formSubProps"
    :model="subs"
    v-bind="formSubProps"
  >
  </nf-form>
  <el-button type="" @click="addSub" size="mini" >添加分栏</el-button>
  <!--设置分栏里的字段-->
  <el-collapse v-model="activeNames">
    <el-collapse-item
      v-for="(item, index) in subs.cols"
      :key="index"
      :title="item.title"
      :name="index"
    >
      <el-button type="" @click="delSub" size="mini" >删除分栏</el-button>
      <item-sub
        :sub-index="index"
        :sub-cols="item"
        :title="item.title"
        :form-meta="formMeta"
      ></item-sub>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
  import { reactive, ref } from 'vue'
  import { ElButton, ElCollapse, ElCollapseItem } from 'element-plus'
  import { nfForm } from '../map'

  import itemSub from './form-sub-item.vue'
  import item_text from './json/form-sub.json'

</script>

<script setup>

  const props = defineProps({
    formMeta: [Object]
  })

  // 文本类扩展属性表单，需要的 meta
  const formSubProps = reactive(item_text)

  const { subs } = props.formMeta

  const activeNames = ref([0])

  // 添加分栏
  const addSub = () => {
    subs.cols.push({
      title: '新栏目',
      colIds: []
    })
  }
  
  // 删除分栏
  const delSub = (index) => {
    subs.cols.splice[index, 1]
  }

</script>